<template>
  <el-dialog
      title="区域二维码"
      width="600"
      :visible.sync="dialogVisible"
      @close="$emit('update:visible',false)">
    <div class="previewlogBody"
         v-loading="codeloading"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.6)">
      <div class="applycode savebox" ref="imageDom">
        <div class="apply-code-title">
          <p class="getcode">{{ qrcodeInfo.title ? qrcodeInfo.title : '--' }}</p>
          <div class="apply-code-img">
            <!--            <img :src="codeQrcode" alt="">-->
            <div id="qrcode"></div>
          </div>
          <p class="getcode-line">扫一扫进入区域</p>
        </div>
      </div>
      <div class="primaryBtn">
        <el-button type="primary" size="small" @click="downloadIamge">下载二维码</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import html2canvas from 'html2canvas'
import QRCode from "qrcodejs2";
import {mapActions, mapGetters} from "vuex";
import {systemIndex} from '@/api/admin/system';

export default {
  name: 'previewImgDialog',
  props: ['visible', 'classoption', 'type'], // codetype: 1, // 1 通知 2 问卷 // listId id
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('classoption',this.classoption)
        if (this.classoption !== 'special') {
          this.qrcodeInfo.title = this.classoption.class_name
          this.qrcodeInfo.class_id = this.classoption.id
          this.qrcodeInfo.link = 'classArea'
        }else{
          this.qrcodeInfo.title = this.typeTitle[this.type].name;
          this.qrcodeInfo.link = this.typeTitle[this.type].link
        }
        this.qrcode()
      } else {
        document.getElementById("qrcode").innerHTML = "";
        this.infoForm = null
      }
    }
  }
  ,
  data() {
    return {
      dialogVisible: this.visible,
      imgUrl: '',
      codeloading: true,
      codeQrcode: null,
      infoForm: null,
      oldClass: {}, // 未处理的班级
      oldsection: {}, // 未处理的年段
      editClass_id: [],
      editsection_id: [],
      schooName: '--',
      typeTitle:{
        'food': {name:'职工餐评', link: 'foodPoint'}
      },
      qrcodeInfo: {
        title: '',
        class_id: '',
        link: ''
      }
    }
  }
  ,
  created() {
  }
  ,
  computed: {
    ...
        mapGetters(['userInfo']),
  }
  ,
  mounted() {

  }
  ,
  methods: {
    // 生成二维码
    qrcode() {
      // 此处需要区分 问卷 通知
      let self_ = this;
      systemIndex({}).then(response => {
        new QRCode('qrcode', {
          width: 220,
          height: 220, // 高度
          text: `${response.vo.url}/workers/#/${this.qrcodeInfo.link}?class_id=${this.qrcodeInfo.class_id}`
        })
        this.schooName = response.vo.name
        setTimeout(() => {
          self_.html2canvasFn()
        }, 100)
      })
    },
    html2canvasFn() {
      let self_ = this
      let opts = {
        useCORS: true
      }
      html2canvas(self_.$refs.imageDom, opts).then(canvas => {
        let image = new Image()
        image.onload = function () {
          self_.imgUrl = canvas.toDataURL('image/png')
          self_.codeloading = false
        }
        image.src = canvas.toDataURL('image/png')
      })
    },
    downloadIamge() { // 下载图片地址和图片名
      let image = new Image()// 解决跨域 Canvas 污染问题
      let this_ = this
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = `${this_.classoption.class_name}-区域二维码` || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = this.imgUrl
    }
  }
}
</script>
<style scoped>
.previewlog {
  padding: 20px 0;
}

.previewlogBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



.saveimgBg {
  width: 100%;
  display: block;
}

.primaryBtn {
  padding: 20px 0;
}



.title-top {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  padding: 30px 0;
  color: #000;
}

.title-body {
  padding: 0 20px;

}

.title-list {
  font-size: 18px;
  margin-bottom: 5px;
  color: #000;
}

.getcode-line {
  width: 100%;
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 20px;
  color: #999
}

.getcode {
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.apply-code-img {
  width: 240px;
  margin: 10px auto 0;
  background: #fff;
  overflow: hidden;
  border: 1px solid #eee;
}

.apply-code-img img {
  margin: 10px;
}
</style>

